<template>
  <div class="order-item">
    <n-data-table :columns="columns" :data="orderItemList" />
  </div>
</template>
<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import { type OrderItem } from './entity/OrderItem';
  import { getOrderItemList } from '@/api/order/order';
  import { h } from 'vue';
  import { NImage } from 'naive-ui';
  // import { formatToDateTime } from '@/utils/dateUtil';
  // eslint-disable-next-line vue/no-setup-props-destructure
  interface Props {
    orderId: number; // 订单对象
  }
  const props = withDefaults(defineProps<Props>(), {
    orderId: 0,
  });
  const orderItemList = ref<OrderItem[]>();

  const columns = [
    // {
    //   title: '商品ID',
    //   key: 'id',
    //   width: 40,
    // },
    {
      title: '图片',
      key: 'goodsImg',
      width: 50,
      align: 'center',
      render: (row) => {
        return h(NImage, {
          src: row.goodsImg,
          width: 50,
        });
      },
    },
    {
      title: '商品名称',
      key: 'goodsName',
      width: 200,
    },
    {
      title: '商品数量',
      key: 'goodsNum',
      align: 'center',
      width: 50,
    },
    {
      title: '价格(元)',
      key: 'goodsPrice',
      align: 'center',
      width: 50,
    },
  ];

  onMounted(async () => {
    orderItemList.value = await getOrderItemList({ orderId: props.orderId });
  });
</script>
<style scoped lang="less">
  .order-item {
    margin: 20px 0;
  }
</style>
